<template>
	<view class="flex-col page">
		<view class="flex-col group_1">
			<text class="text_1">我们要对您绑定的手机号进行验证：</text>
			<text class="text_2">{{phone}}</text>
			<view class="flex-col group_2">

				<view class="phone-num-input-box u-flex u-row-between section_2">
					<input type="number" class="phone-num-input" :class="{'u-m-l-10': index==3||index==7}" maxlength="1"
						v-model="phone_num[index]" v-for="(item,index) in phone_num" :key="index" :id="'input-'+ index"
						:focus="focus_index == index" autocomplete="off" autocapitalize="off" autocorrect="off"
						@keyup.delete="funDeletePhoneNum" @input="funInputPhoneNum" @focus="funFocusInput">
				</view>
				<text class="text_3" v-if='showText==true' @click="getYZM">获取验证码</text>
				<view v-else class="send text_3">{{second}}s重新发送</view>
			</view>
			<view class="flex-col items-center button" @click="next"><text class="text_4">下一步</text></view>
		</view>
	</view>
</template>

<script>
	export default {
		components: {},
		data() {
			return {
				code: '',
				phone: '',
				focus_index: -1,
				phone_num: {
					0: '',
					1: '',
					2: '',
					3: '',
					4: '',
					5: ''
				},
				showText: true,
				second: 60,
			};
		},
		created() {
			this.getdata()
		},
		methods: {
			getYZM() {
				console.log(this.userInfo, 'userInfo')
				this.showText = false;
				var interval = setInterval(() => {
					let times = --this.second
					this.second = times < 10 ? '0' + times : times //小于10秒补 0
				}, 1000)
				setTimeout(() => {
					clearInterval(interval)
					this.second = 60
					this.showText = true
				}, 60000)
				this.$http('ours.getYZM', {
					phone: this.phone
				}).then(res => {
					if (res.code == 200) {
						uni.showToast({
							icon: 'none',
							title: res.msg
						})
					} else {
						uni.showToast({
							title: res.msg,
							icon: 'error'
						})
					}
				})
			},
			next() {
				let arr = Object.values(this.phone_num);
				let yzm = arr.join('');
				console.log(yzm, 'yzm')
				if (yzm == '' || yzm.length < 6) {
					uni.showToast({
						icon: "error",
						title: '请输入正确的验证码'
					})
					return;
				}
				uni.navigateTo({
					url: '/pages/common/security/oldpassword'
				})
			},
			getdata() {
				this.$http('common.getInfo').then(res => {
					if (res.code == 200) {
						this.phone = res.data.phone
					} else {
						uni.showToast({
							icon: "error",
							title: '获取手机号失败'
						})
					}
				})
			},
			funInputPhoneNum(e) {
				// console.log(e)
				var index = (e.target.id).replace('input-', '');
				var value = e.detail.value;
				if (index != '10' && value != '') {
					this.focus_index = Number(index) + 1
				}
			},
			funDeletePhoneNum(e) {
				// console.log(e,'1111')
				var index = (e.target.id).replace('input-', '');
				if (this.phone_num[index] == '' && index > 1) {
					this.focus_index = Number(index) - 1;
				}
			},
			funFocusInput(e) {
				// console.log(e,'eee')
				var index = (e.target.id).replace('input-', '');
				if (this.phone_num[index] != '') {
					this.phone_num[index] = '';
				}
			},
		},
	};
</script>

<style scoped lang="css">
	.image_2 {
		width: 1rpx;
		height: 86rpx;
	}

	.page {
		background-color: #ffffffff;
		width: 100%;
		overflow-y: auto;
		overflow-x: hidden;
		height: 100%;
	}

	.group_1 {
		padding: 101.5rpx 0 555rpx;
		flex: 1 1 auto;
		overflow-y: auto;
	}

	.text_1 {
		align-self: center;
		color: #333333;
		font-size: 28rpx;
		font-family: '.AppleSystemUIFont';
		line-height: 33rpx;
	}

	.text_2 {
		margin-top: 53rpx;
		align-self: center;
		color: #333333;
		font-size: 28rpx;
		font-family: '.AppleSystemUIFont';
		line-height: 33rpx;
	}

	.group_2 {
		margin-top: 59rpx;
		padding: 0 70rpx;
	}

	.button {
		margin-top: 113rpx;
		padding: 20rpx 0 20rpx;
		align-self: center;
		background-image: url('https://codefun-proj-user-res-1256085488.cos.ap-guangzhou.myqcloud.com/617a2ca7e4f1450011362b37/62b127f6d029820011531bae/16557836444497688227.png');
		background-size: 100% 100%;
		background-repeat: no-repeat;
		width: 640rpx;
	}

	.section_2 {
		/* padding: 0 101rpx; */
		/* background-image: url('https://codefun-proj-user-res-1256085488.cos.ap-guangzhou.myqcloud.com/617a2ca7e4f1450011362b37/62b127f6d029820011531bae/16557836409901363882.png');
		background-position: 0% 0%;
		background-size: 100% 100%;
		background-repeat: no-repeat; */
	}

	.section_2 input {
		width: 100rpx;
		height: 80rpx;
		border: 1px solid #eee;
		/* padding-left: 7%; */
	}

	.text_3 {
		margin-top: 46rpx;
		align-self: center;
		color: #1d6aff;
		font-size: 28rpx;
		font-family: '.AppleSystemUIFont';
		line-height: 33rpx;
	}

	.text_4 {
		color: #ffffff;
		font-size: 32rpx;
		font-family: '.AppleSystemUIFont';
		line-height: 38rpx;
	}
</style>
